/* 根据不同屏幕宽度，设置不同rem的大小*/
@media screen and (min-width: 320px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 37.5px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 41.4px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 54px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 64px;
  }
}
body {
  font-size: .21875rem /* 14/64 */;
  background-color: #ccc;
}
.m-layout{
  height: 2000px;
  max-width: 640px;
  min-width: 320px;
  background-color: #fff;
  margin: 0 auto;
}
// 头部
.m-header {
  height: .703125rem /* 45/64 */;
  position: relative;
  // background-color: #f99;
  padding: 0 .9375rem /* 60/64 */;
  border-bottom: 1px solid #ccc;
  h3{
    font-size: .28125rem /* 18/64 */;
    text-align: center;
    font-weight: normal;
    line-height: .703125rem /* 45/64 */;
  }
  .city,.me{
    position: absolute;
    height: .703125rem /* 45/64 */;
    width: .9375rem /* 60/64 */;
    left: 0;
    top: 0;
    // background-color: red;
    text-align: center;
    color: #d3079e;
    line-height: .703125rem /* 45/64 */;
  }
  .me {
    left: auto;
    right: 0;
    background: url('../icon/my.png') no-repeat center center;
    background-size: .34375rem /* 22/64 */ .34375rem /* 22/64 */;
  }
}
// banner 
.m-banner {
  img {
    height: 3.03125rem /* 194/64 */;
    width: 100%;
  }
}
// nav
.m-nav {
  padding: 0 .0625rem /* 4/64 */;
  img {
    width: 3.21875rem /* 206/64 */;
    height: 1.71875rem /* 110/64 */;
    margin-top: .125rem /* 8/64 */;
    margin-right: .109375rem /* 7/64 */;
    float: left;
    &:nth-child(3n){
      margin-right: 0;
    }
  }
}
// prod
.m-prod {
  margin-top: .15625rem /* 10/64 */;
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    tr {
      height: 1.78125rem /* 114/64 */;
      td {
        border: 1px solid #ccc;
        img {
         width: 1.875rem /* 120/64 */;
          
        }
      }
    }
  }
}

.m-son {
  height: 3.5rem /* 224/64 */;
  margin-top: .15625rem /* 10/64 */;
  .left,
  .right {
    width: 50%;
    float: left;
    border-bottom: 1px solid #ccc;
  }
  .left{
    border-right: 1px solid #ccc;
    img {
      float: left;
      height: 3.5rem /* 224/64 */;
      width: 100%;
    }
  }
  .right {
    img {
      float: left;
      width: 100%;
      height: 1.75rem /* 112/64 */;
    }
  }
}

.m-act {
  margin-top: .3125rem /* 20/64 */;
  ul {
    li{
      border-bottom: 1px solid #ccc;
      p {
        line-height: .375rem /* 24/64 */;
      }
      a{
        img {
          height: 1.75rem /* 112/64 */;
          width: 100%;
        }
      }
    }
  }
}

.m-ad {
  ul {
    background-color: #f7f7f7;
    li {
      margin-top: .15625rem /* 10/64 */;
      background-color: #fff;
      p{
        line-height: .375rem /* 24/64 */
      }
      a{
        img{
          height: 4.09375rem /* 262/64 */;
          width: 100%;
        }
      }
      &:nth-child(1){
        a{
          height: .625rem /* 40/64 */; 
          width: 1.0625rem /* 68/64 */;
          float: left;
          color: #d3079e;
          text-align: center;
          line-height: .625rem /* 40/64 */;
          margin-left: 1.953125rem /* 125/64 */;
          border-bottom: 2px solid #d3079e;
        }
        a.week {
          margin-left: 3.90625rem /* 250/64 */;
          color: #000000;
          border: none;
        }
      }
      &:nth-child(2){
        margin-top: 0;
      }
    }
    li.more {
      height: .46875rem /* 30/64 */;
      text-align: center;
      a {
        line-height: .46875rem /* 30/64 */;
      }
    }
    li.footer {
      height: .46875rem /* 30/64 */;
      background-color: #d3079e;
      padding-left: .15625rem /* 10/64 */;
      a {
        line-height: .46875rem /* 30/64 */;
        color: #fff;
      }
    }
  }
}